import React from "react";
import avatar from '../images/avatar.png'; // 导入图片

class CommentList extends React.Component {
  render() {
    return (
      <div className="comment-list">
        {this.props.list.map((item, index) => {
          return (
            <div className="comment-item" key={index}>
              <div>
                <img className="user-head" src={avatar} alt="头像" />
              </div>

              <div className="comment">
                <div className="user">{item.author}</div>
                <p className="text">{item.comment}</p>
                <div className="info">
                  <span className="time">{item.time.toLocaleString()}</span>
                  <span className={item.attitude === 1 ? 'like liked' : 'like'} onClick={() => this.props.ChangeAtt(item.id, item.attitude === 1 ? 0 : 1)}>
                    <i className="icon" />
                  </span>
                  <span className={item.attitude === -1 ? 'hate hated' : 'hate'} onClick={() => this.props.ChangeAtt(item.id, item.attitude === -1 ? 0 : -1)}>
                    <i className="icon" />
                  </span>
                  <span className="btn-hover" onClick={(e) => this.props.del(e, item.id)}>删除</span>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}
export default CommentList